<template>
  <header class="header-top">
    <section class="header-goback d-flex">
      <div class="flex-item back" v-if="goBack" @click="$router.go(-1)">
        <i class="fa fa-angle-left fa-lg"></i>
      </div>
      <div class="title flex-fill" v-if="title">
        <h3 class="text-center">{{title}}</h3>
      </div>
      <div class="right" v-if="showRight">
        <slot name="icon-right">
          <router-link to="/index" class="fa fa-home"></router-link>
        </slot>
      </div>
    </section>
  </header>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {}
    },
    props: [
      'signinUp',
      'title',
      'showRight',
      'goBack'
    ]
  }
</script>

<style lang="stylus" type="text/stylus">
  .header-top
    position: fixed
    width: 100%
    height: 2rem
    line-height: 2rem
    left: 0
    top: 0
    color: #ffffff
    background-color: #ff5f4b
    z-index: 100
    .header-goback
      left: 0.4rem
      line-height: 2rem
      margin-left: .4rem
      .back
        flex: 0 0 40px
        width: 40px
      .right
        flex: 0 0 30px
        width: 30px
        padding-right: 12px
        text-align: right
        .fa-home
          color: #ffffff
</style>
